<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>业务配置</title>
    <link   rel="stylesheet"        th:href="@{/easyui/themes/default/easyui.css}" />
    <link   rel="stylesheet"        th:href="@{/easyui/themes/icon.css}" />
    <script type="text/javascript"  th:src="@{/easyui/jquery.min.js}" ></script>
    <script type="text/javascript"  th:src="@{/easyui/jquery.easyui.min.js}" ></script>
    <script type="text/javascript"  th:src="@{/easyui/locale/easyui-lang-zh_CN.js}" ></script>
    <script type="text/javascript"  th:src="@{/utils/AlertUtil.js}" ></script>
    <script type="text/javascript"  th:src="@{/utils/AjaxUtil.js}" ></script>
    <script type="text/javascript"  th:src="@{/utils/Form.js}" ></script>
    <style type="text/css">
        #baseConifg tr {
            border: red 2px solid;
        }
        #baseConifg tr td:nth-of-type(odd) {
            width: 100px;
            text-align: right;
        }
        #baseConifg tr td:nth-of-type(even) {
            text-align: left;
        }
    </style>
</head>
<body>
<div id="aa" class="easyui-accordion" data-options="fit:true">
<div title="基础配置" style="width:100%;padding:5px;background:#fafafa;" data-options="iconCls:'icon-save'">
    <form id="baseForm">
        <table id="baseConifg" style="width: 100%;">
            <tr>
                <td>业务标识:</td>
                <td><input class="easyui-textbox" name="formName" data-options="required:true"/></td>
                <td>业务名称:</td>
                <td><input class="easyui-textbox" name="formDisplay" data-options="required:true"/></td>
                <td>关联的表:</td>
                <td><input class="easyui-textbox" name="tableId" data-options="required:true" /></td>
                <td>是否多选:</td>
                <td><input class="easyui-combobox" name="isMultSelect" data-options="data:Form.ynoptions,panelHeight:'auto'"/></td>
            </tr>
            <tr>
                <td>是否显示序号:</td>
                <td><input class="easyui-combobox" name="isShowSerial" data-options="data:Form.ynoptions,panelHeight:'auto'"/></td>
                <td>是否分页:</td>
                <td><input class="easyui-combobox" name="isPage" data-options="data:Form.ynoptions,panelHeight:'auto'"/></td>
                <td>每页大小:</td>
                <td><input class="easyui-textbox" name="pageNum"/></td>
                <td>显示权限:</td>
                <td><input class="easyui-combobox" name="authType" data-options="data:Form.authType,panelHeight:'auto'"/></td>
            </tr>
            <tr>
                <td>备注说明:</td>
                <td colspan="7"><input class="easyui-textbox" name="comment" style="width: 100%;height: 50px" data-options="multiline:true"/></td>
            </tr>
            <tr>
                <td colspan="8" style="text-align: left">
                    <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">保存</a>
                </td>
            </tr>
        </table>
    </form>
</div>
<div title="操作按钮" style="width:100%;padding:5px;background:#fafafa;" data-options="iconCls:'icon-save',collapsible:true">
    <input class="easyui-checkbox" labelPosition="after"  name="index"     value="index"   label="浏览">
    <input class="easyui-checkbox" labelPosition="after"  name="add"       value="add"     label="新增">
    <input class="easyui-checkbox" labelPosition="after"  name="edit"      value="edit"    label="修改">
    <input class="easyui-checkbox" labelPosition="after"  name="list"      value="list"    label="列表">
    <input class="easyui-checkbox" labelPosition="after"  name="find"      value="find"    label="获取">
    <input class="easyui-checkbox" labelPosition="after"  name="query"     value="query"   label="查询">
    <input class="easyui-checkbox" labelPosition="after"  name="del"       value="del"     label="删除">
    <input class="easyui-checkbox" labelPosition="after"  name="dels"      value="dels"    label="批量删除">
    <input class="easyui-checkbox" labelPosition="after"  name="import"    value="import"  label="导入">
    <input class="easyui-checkbox" labelPosition="after"  name="export"    value="export"  label="导出">
</div>
<div title="列表配置" style="width:100%;padding:5px;background:#fafafa;height:600px"  data-options="iconCls:'icon-save',collapsible:true">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north',split:true,border:false" style="padding: 5px;">
            <table style="width: 100%;">
                <tr>
                    <td>数据来源
                        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="onJxSql()">解析</a>
                        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok',plain:true">保存</a>
                    </td>
                </tr>
                <tr>
                    <td><input id="sql" name="sql" class="easyui-textbox" style="width: 100%; height: 90px" data-options="multiline:true,required:true"/></td>
                </tr>
                <tr>
                    <td>参数列表</td>
                </tr>
                <tr>
                    <td><input id="params" name="sql" class="easyui-textbox" style="width: 100%; " data-options=""/></td>
                </tr>
            </table>
        </div>
        <div data-options="region:'center',border:false">
            <table id="columnMetaData" class="easyui-datagrid" title="列表设置" data-options="fit:true,singleSelect:true,onClickRow:onColumnClick">
                <thead>
                <tr>
                    <th data-options="field:'id'" ailgn="center">序号</th>
                    <th data-options="field:'tableName'">表名字</th>
                    <th data-options="field:'fieldName'">字段名</th>
                    <th data-options="field:'fieldLabel'">别名</th>
                    <th data-options="field:'fieldType'">数据类型</th>
                    <th data-options="field:'comment'">备注</th>
                </tr>
                </thead>
            </table>
        </div>

        <div data-options="region:'east',split:true,border:false" style="width:300px">
            <table id="pgrid" class="easyui-propertygrid" style="width: 100%;" data-options="onClickRow:onPClickRow,fit:true,method:'get',url:'../utils/ColumnProp.json',columns:[
                [
                {field:'name',title:'属性',width:100,sortable:false},
   		        {field:'value',title:'值',width:150,resizable:false}]
            ]">
            </table>
        </div>

    </div>
</div>
</div>
<script type="text/javascript">

    // 解析sql
    function onJxSql(){
        var p = $("#sql").val();
        if(p == ""){
            AlertUtil.error("参数错误");
            return;
        }
        AjaxUtil.get("jx?sqlStr="+$("#sql").val(),okFun,null,"");
    }

    function okFun(data){
        $("#columnMetaData").datagrid("loadData",data);
    }

    function onColumnClick(index,row){
        onReflect(row)
    }

    function onReflect(row){
        if(row) {
            var pRows  = $("#pgrid").propertygrid("getData").rows;
            for (attr in row) {
                for(index in pRows){
                    if(pRows[index]["attr"] == attr){
                        pRows[index]["value"]=row[attr];
                    }
                }
            }
            $("#pgrid").propertygrid("loadData",pRows);
        }
    }

    function onPClickRow(index,row){
        // 获取选中行
        var columnItem = $("#columnMetaData").datagrid("getSelected");
        if(columnItem) {
            // 属性变化的
            var rows = $("#pgrid").datagrid('getChanges');
            for (index1 in rows) {
                columnItem[rows[index1]["attr"]]=rows[index1]["value"];
            }
        }
    }


</script>
</body>
</html>